<template>
    <div class="editor-surfaces" ref="scroller" :type="pieceType"
         :class="{ open: (open || show) && selectSurface.surface_name }">

        <div class="editor-surfaces-scroller" :class="{ emb: frameVisible }">
            <div class="editor-surfaces-outer">
                <ul>
                    <li v-for="surface in surfaceFormat" :key="surface.surface_name"
                        :class="{ active: surface.surface_name == selectSurface.surface_name, used: getSurfacesUsed(surface) }"
                        class="editor-surfaces-piece" @mouseleave="onMouseleave(surface, 'title')">

                        <DesignerPiecesPanelShadow v-if="surface.pieces.length > 1 || isEmbShadow(surface)">

                            <div class="editor-surfaces-pieces" v-if="surface.pieces.length > 1">
                                <a v-for="(piece, index) in surface.pieces" :key="index"
                                   :class="{ active: piece == activePiece, used: piece.layers.length > 0 }"
                                   @click="setActivePiece(piece)">
                                    <small :name="getPieceName(piece)"></small>
                                    <CommonCurrencyRate :price="priceFormat.get(piece.id)" type="icon|price"
                                                        v-if="priceFormat.get(piece.id)" />
                                    <em v-else-if="piece.layers.length > 0">Free</em>
                                </a>
                            </div>

                            <div class="editor-surfaces-platens"
                                 v-if="activePiece && activePiece.type == 2 && activePiece.layers.length > 0">
                                <!-- 台板 -->
                                <a v-for="layer in activePiece.layers" :key="layer.id"
                                   :class="{ active: activeLayer == layer }" @click="setActiveLayer(layer)">
                                    <small :name="layer.platens_id"></small>
                                    <CommonCurrencyRate :price="layer.price" type="icon|price" />
                                </a>
                            </div>

                        </DesignerPiecesPanelShadow>
                        <div class="editor-surfaces-name" @click="setActiveSurfaces(surface)"
                             @mouseenter="onMouseenter(surface, 'title')">
                            <strong v-text="getSurfacesName(surface)"></strong>
                            <em v-if="!surface.price" />
                            <CommonCurrencyRate :price="surface.price" type="pre|icon|price" :other="{ pre: '+' }"
                                                v-else />
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="add-frame" v-if="frameVisible">
            <button @click="openEmbPlatenDialog()">
                <svg-icon name="design-frame" />
                <span>Add Frame</span>
            </button>
        </div>

    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    props: {
        spu: { type: String, default: '' },
    },
    data () {
        return {
            show: true,
            open: null, // 打开
        };
    },
    computed: {
        ...mapGetters("designer", {
            surfaces: "getSurfaces",
            pieces: "getPieces",
            models: "getModels",
            activeSurface: "getActiveSurface",
            activePiece: "getActivePiece",
            activeLayer: "getActiveLayer",
            activeModel: "getActiveModel",
            activeModelTag: "getActiveModelTag",
            piecesPrice: "getPiecesPrice",
        }),


        priceFormat () {
            return new Map(this.piecesPrice.map(i => [i.id, i.value]))
        },
        surfaceFormat () {
            const type = this.activePiece.type
            const result = [];

            this.surfaces.map(surfaces => {
                const pieces = surfaces.pieces.filter(i => i.type == type);

                if (pieces.length > 0) {

                    result.push({
                        ...surfaces,
                        price: this.getSurfacesPrice(pieces),
                        pieces: pieces
                    })
                }
            })
            return result
        },

        selectSurface () {
            return this.open || this.activeSurface || {};
        },


        // 款式类型
        pieceType () {
            const type = this.$getClassifyBySpu(this.spu);
            if (/shorts|pants/.test(type)) {
                return type;
            } else {
                return 'clothes'
            }
        },
        frameVisible () {

            if (!this.activePiece || this.activePiece.type != 2) {
                return false
            } else {

                // 最多的数量
                const count = {
                    'Front Side': 3,
                    'Back Side': 3,
                    'Sleeve Left': 1,
                    'Sleeve Right': 1,
                    'Long Sleeve Left': 2,
                    'Long Sleeve Right': 2,
                    'Front Side - Left Leg': 2,
                    'Front Side - Right Leg': 2,
                    'Back Side - Left Leg': 2,
                    'Back Side - Right Leg': 2,
                }

                const min = count[this.activePiece.canvas_name] || 0

                return this.activePiece.layers.length < min
            }

        }
    },

    watch: {
        activePiece (newval, oldval) {
            if (!oldval) {
                // 没有值的时候，表示初始化
                this.open = this.surfaces.find((item) => item.pieces.indexOf(newval) >= 0);
            }
        },
    },
    methods: {
        // 选中线框图
        setActiveSurfaces (item) {
            if (item.pieces.indexOf(this.activePiece) >= 0) {
                // 当前已经选中
                this.open = item;
            } else {
                // 先中已经有图层的设计区
                // let models = this.models;
                // let activeModel = models.filter(
                //     (model) => model.surface_name == item.surface_name
                // )[0];
                let useds = item.pieces.filter((item) => item.layers.length > 0);
                let piece = useds[0] || item.pieces[0];

                if (item.pieces.length > 1) {
                    // 有多个内容时，只是打开
                    if ((this.activeSurface || {}).surface_name == item.surface_name) {
                        // 当前的，不切换
                        this.open = item;
                    } else {
                        this.setActivePiece(piece);
                    }
                } else {
                    this.setActivePiece(piece);
                }
            }

            // 滚动到中间
            let warper = this.$refs.scroller;
            let index = this.surfaces.indexOf(item);
            let select = (warper.querySelectorAll("th") || [])[
                Math.max(0, index)
            ];

            if (select) {
                let scrollLeft = warper.scrollLeft;
                let warperWidth = warper.offsetWidth;
                let toLeft =
                    select.offsetLeft +
                    0.5 * select.offsetWidth -
                    0.5 * warperWidth;
                warper.scrollLeft = Math.max(toLeft, 0);
            }
        },

        // 选中设计区
        setActivePiece (item) {
            var surface = this.surfaces.find((i) => i.pieces.indexOf(item) >= 0);
            let models = this.models;
            let activeModel = models.find((model) => model.surface_name == surface.surface_name && model.model_tag == this.activeModelTag);

            if (activeModel && this.activeModel != activeModel) {
                this.$store.commit("designer/SET_ACTIVE_MODEL", activeModel);
            }

            // 滚动到指定位置
            item && this.$store.commit("designer/SET_ACTIVE_PIECE", item);
            if (item && item.type == 2) {
                // 刺绣选中绣框
                this.$store.commit("designer/SET_ACTIVE_LAYER_INDEX", item.layers.length > 0 ? 0 : -1);
            } else {
                this.$store.commit("designer/SET_ACTIVE_LAYER", null);
            }
            this.open = surface || null;
        },

        setActiveLayer (layer) {
            if (this.activePiece) {
                this.$store.commit("designer/SET_ACTIVE_LAYER_INDEX", this.activePiece.layers.indexOf(layer));
            }

        },

        getSurfacesName (surface) {
            let names = {
                "Front Side": "Front",
                "Back Side": "Back",
                "Sleeve Left": "Left sleeve",
                "Sleeve Right": "Right sleeve",
                "Long Sleeve Left": "Sleeve left",
                "Long Sleeve Right": "Sleeve right",
                "Neck Label Inner": "Inside neck label",
            };

            return names[surface.surface_name] || surface.surface_name;
        },

        getSurfacePieces (pieces) {
            const type = this.activePiece.type
            return pieces.filter(i => i.type == type)
        },

        // 是否被使用了
        getSurfacesUsed (surface) {
            let piece = surface.pieces || [];
            let used = piece.filter((item) => item.layers.length > 0);
            return used.length > 0;
        },

        // 获取线框图的价格
        getSurfacesPrice (pieces) {
            let pieceObj = new Map(this.piecesPrice.map((i) => [i.id, i]))
            return pieces.reduce((pre, cur) => {
                const piece = pieceObj.get(cur.id) || {}
                const value = piece.value || 0
                return pre + value;
            }, 0);
        },

        // 获取价格
        getPiecePrice (piece) {
            let layer = piece.layers || [];
            let active = this.piecesPrice.find((item) => item.piece == piece);

            if (active && active.value) {
                return active.value
            } else if (layer.length > 0) {
                return "Free";
            } else {
                return "";
            }
        },
        getPieceName (item) {
            // let name = item.canvas_name.replace(/[\w\W]*\-\s*([\w\W]*)$/,"$1");
            let name = item.canvas_name || "";
            name = name.replace(/\s/g, "-").replace(/-+/g, "-");
            name = name.toLowerCase();
            return name;
        },

        onClick (event) {
            let target = event.target;
            let warp = target.closest(".editor-surfaces");

            if (warp && warp == this.$el) {
                // 不管
            } else {
                // this.setVisible(false);
                this.open = null;
                this.show = false;
            }
        },
        // 鼠标进入
        onMouseenter (surface) {
            if (this.activeSurface && surface.surface_name == this.activeSurface.surface_name) {
                this.show = true;
            }
        },
        onMouseleave (surface) {
            this.show = false;
        },
        openEmbPlatenDialog () {
            this.$emit("global:DESIGN_OPEN_EMB_LABEL",);
        },
        isEmbShadow (surface) {
            const pieces = surface.pieces || []
            const first = pieces[0] || {}
            const layers = first.layers || []
            return first.type == 2 && layers.length > 0
        },
        scrollInit () {
            const scrollDiv = document.querySelector(".editor-surfaces-scroller");
            let timeout;

            function handler (event) {
                // 清除之前的定时器
                clearTimeout(timeout);

                // 设定新的定时器，在100毫秒后执行处理函数
                timeout = setTimeout(() => {
                    const detail = event.wheelDelta || event.detail;
                    const moveForwardStep = 1;
                    const moveBackStep = -1;
                    let step = 0;

                    if (detail < 0) {
                        step = moveForwardStep * 100;
                    } else {
                        step = moveBackStep * 100;
                    }

                    scrollDiv.scrollLeft += step;
                }, 50); // 在这里设置延迟时间，单位为毫秒
            }

            scrollDiv.addEventListener('mousewheel', handler, false);
        }
    },
    mounted () {

        if (this.activePiece) {
            this.open = this.surfaces.find((item) => item.pieces.indexOf(this.activePiece) >= 0);
            this.scrollInit()
        }

        window.addEventListener("click", this.onClick);
    },

    // 销毁
    beforeDestroy: function () {
        window.removeEventListener("click", this.eventListener);
    },
};
</script>
<style lang="scss" scoped>
.editor-surfaces {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;

    .editor-surfaces-scroller {
        position: relative;
        display: flex;
        pointer-events: none;
        scrollbar-width: none;
        // justify-content: center;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        flex: 1;
        padding: 10px 10px 0;
        height: 300px;


        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        &.emb {
            padding: 10px 116px 0;
        }

        .editor-surfaces-outer {
            position: relative;
            display: inline-block;
            margin: 0 auto;

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }

            &>ul {
                display: inline-flex;
                position: relative;
                pointer-events: all;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    border: 1px solid #e0e0e0;
                    border-radius: 6px;
                }

                li {
                    display: flex;
                    position: relative;

                    &+li {
                        margin-left: 2px;
                    }

                    .editor-surfaces-name {
                        padding: 0 16px;
                        position: relative;
                        border-radius: 6px;
                        height: 32px;
                        line-height: 30px;
                        box-sizing: border-box;
                        border: 1px solid transparent;
                        cursor: pointer;

                        &>strong {
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                            font-size: 14px;
                            color: #292929;
                        }

                        &>em {
                            margin-left: 2px;
                            font-family: Roboto, Roboto;
                            font-weight: 400;
                            font-size: 12px;
                            color: #292929;
                        }

                        .currency-rate {
                            font-family: Roboto, Roboto;
                            font-weight: 400;
                            font-size: 12px;
                            color: #292929;

                            &::v-deep span[name='price'] {
                                margin-left: 0;
                            }
                        }
                    }

                    .pieces-panel-shadow {
                        position: absolute;
                        left: 0;
                        top: 100%;
                        opacity: 0;
                        min-width: 100%;
                        pointer-events: none;
                    }

                    .editor-surfaces-pieces {
                        top: 100%;
                        padding: 10px;
                        display: flex;
                        justify-content: center;

                        &+.editor-surfaces-platens {
                            padding: 16px 10px;
                            justify-content: flex-start;
                        }

                        a {
                            width: 48px;
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            cursor: pointer;

                            &>small {
                                display: block;
                                padding-bottom: 100%;
                                width: 100%;
                                border-radius: 4px;
                                overflow: hidden;
                                position: relative;

                                &::after {
                                    content: '';
                                    position: absolute;
                                    left: 50%;
                                    top: 50%;
                                    transform: translate(-50%, -50%);
                                    width: 38px;
                                    height: 44px;
                                    background-repeat: no-repeat;
                                }
                            }

                            &>em {
                                font-size: 14px;
                                color: #555555;
                                line-height: 16px;
                                margin-top: 6px;
                            }

                            &>.currency-rate {
                                margin-top: 6px;
                                font-size: 14px;
                                color: #555555;
                                line-height: 16px;

                                &::v-deep span {
                                    margin-left: 0;
                                }
                            }

                            &+a {
                                margin-left: 10px;

                                &::before {
                                    content: '';
                                    position: absolute;
                                    left: -5px;
                                    top: 18px;
                                    width: 1px;
                                    height: 12px;
                                    background: #e0e0e0;
                                    pointer-events: none;
                                }
                            }

                            &:hover {
                                small {
                                    background: #f6f6f6;
                                }
                            }

                            &.active {
                                small {
                                    background: #f6f6f6;
                                }

                                small::before {
                                    content: '';
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    height: 2px;
                                    background-color: #ea4c89;
                                }
                            }
                        }
                    }

                    .editor-surfaces-platens {
                        border-top: 1px solid #e6e6e6;
                        display: flex;
                        justify-content: center;
                        padding: 10px;
                        position: relative;

                        small {
                            display: block;
                            border-radius: 4px;
                            position: relative;
                            width: 48px;
                            height: 48px;

                            &::before {
                                content: '';
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                border: 1px solid #e6e6e6;
                                border-radius: 4px;
                            }

                            &::after {
                                content: '';
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%, -50%);
                                width: 38px;
                                height: 44px;
                                background-repeat: no-repeat;
                                background-image: url(@/assets/images/designer/designer-pieces-platens.png);
                                background-size: 672px 108px;
                            }

                            &[name='1']:after {
                                background-position: -5px -5px;
                            }

                            &[name='2']:after {
                                background-position: -53px -5px;
                            }

                            &[name='3']:after {
                                background-position: -101px -5px;
                            }
                        }

                        .currency-rate {
                            margin-top: 6px;

                            &::v-deep span {
                                margin-left: 0;
                            }
                        }

                        a {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            font-size: 14px;
                            cursor: pointer;

                            &.active {
                                small::before {
                                    border: 1px solid #ea4c89;
                                    background: #f6f6f6;
                                }
                            }

                            &:hover {
                                small::before {
                                    background: #f6f6f6;
                                }

                                color: #575757;
                            }

                            &+a {
                                margin-left: 10px;
                            }
                        }
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        left: 100%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 1px;
                        margin-left: 3px;
                        height: 14px;
                        background: #e0e0e0;
                    }

                    &:last-child::before {
                        display: none;
                    }

                    &:hover {
                        &::before {
                            display: none;
                        }

                        .editor-surfaces-name {
                            border: 1px solid #e0e0e0;
                            background-color: #fff;
                            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
                            z-index: 1;
                        }
                    }

                    &.active {
                        &::before {
                            display: none;
                        }

                        .editor-surfaces-name {
                            z-index: 1;
                            border: 1px solid #e0e0e0;
                            background-color: #fff;
                            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

                            strong {
                                color: #000;
                            }
                        }
                    }

                    &.used {
                        .editor-surfaces-name strong {
                            color: #ea4c89;
                        }
                    }
                }
            }
        }
    }

    .add-frame {
        background-color: #fff;
        position: absolute;
        padding-top: 10px;
        height: 38px;
        padding-right: 6px;
        z-index: 3;
        right: 0;
        top: 0;

        &>button {
            display: flex;
            align-items: center;
            border: none;
            pointer-events: all;
            width: 106px;
            height: 32px;

            svg {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }

            span {
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }


    &.open .editor-surfaces-outer>ul li.active .pieces-panel-shadow {
        opacity: 1;
        pointer-events: all;

        &+.editor-surfaces-name {
            border: 1px solid transparent;
            background-color: transparent;
            box-shadow: none;
        }
    }

    // 衣服
    &[type='clothes'] .editor-surfaces-pieces a {
        small {
            &::after {
                background-image: url(@/assets/images/designer/designer-pieces-clothes.png);
                background-size: 672px 108px;
            }

            &[name='front-side-middle']:after {
                background-position: -5px -5px;
            }

            &[name='front-side-top']:after {
                background-position: -53px -5px;
            }

            &[name='front-side-bottom']:after {
                background-position: -101px -5px;
            }

            &[name='front-side-pocket']:after {
                background-position: -149px -5px;
            }

            &[name='front-side-lower-left']:after {
                background-position: -197px -5px;
            }

            &[name='front-side-lower-right']:after {
                background-position: -245px -5px;
            }

            &[name='front-side-shoulder-left']:after {
                background-position: -293px -5px;
            }

            &[name='front-side-shoulder-right']:after {
                background-position: -341px -5px;
            }

            &[name='back-side-middle']:after {
                background-position: -389px -5px;
            }

            &[name='back-side-top']:after {
                background-position: -437px -5px;
            }

            &[name='back-side-bottom']:after {
                background-position: -485px -5px;
            }

            &[name='back-side-neck-label-outer']:after {
                background-position: -533px -5px;
            }

            &[name='back-side-lower-right']:after {
                background-position: -581px -5px;
            }

            &[name='back-side-lower-left']:after {
                background-position: -629px -5px;
            }
        }

        // &.active small {
        //     &[name='front-side-middle']::after {
        //         background-position: -5px -59px;
        //     }
        //     &[name='front-side-top']::after {
        //         background-position: -53px -59px;
        //     }
        //     &[name='front-side-bottom']::after {
        //         background-position: -101px -59px;
        //     }
        //     &[name='front-side-pocket']::after {
        //         background-position: -149px -59px;
        //     }
        //     &[name='front-side-lower-left']::after {
        //         background-position: -197px -59px;
        //     }
        //     &[name='front-side-lower-right']::after {
        //         background-position: -245px -59px;
        //     }
        //     &[name='front-side-shoulder-left']::after {
        //         background-position: -293px -59px;
        //     }
        //     &[name='front-side-shoulder-right']::after {
        //         background-position: -341px -59px;
        //     }
        //     &[name='back-side-middle']::after {
        //         background-position: -389px -59px;
        //     }
        //     &[name='back-side-top']::after {
        //         background-position: -437px -59px;
        //     }
        //     &[name='back-side-bottom']::after {
        //         background-position: -485px -59px;
        //     }
        //     &[name='back-side-neck-label-outer']::after {
        //         background-position: -533px -59px;
        //     }
        //     &[name='back-side-lower-right']::after {
        //         background-position: -581px -59px;
        //     }
        //     &[name='back-side-lower-left']::after {
        //         background-position: -629px -59px;
        //     }
        // }
    }

    &[type='pants'] .editor-surfaces-pieces a {
        small {
            &::after {
                background-image: url(@/assets/images/designer/designer-pieces-pants.png);
                background-size: 672px 108px;
            }

            &[name='front-side-right-leg-top']:after {
                background-position: -5px -5px;
            }

            &[name='front-side-right-leg-center']:after {
                background-position: -53px -5px;
            }

            &[name='front-side-right-leg-bottom']:after {
                background-position: -101px -5px;
            }

            &[name='front-side-left-leg-top']:after {
                background-position: -149px -5px;
            }

            &[name='front-side-left-leg-center']:after {
                background-position: -197px -5px;
            }

            &[name='front-side-left-leg-bottom']:after {
                background-position: -245px -5px;
            }

            &[name='back-side-left-leg-top']:after {
                background-position: -293px -5px;
            }

            &[name='back-side-left-leg-center']:after {
                background-position: -341px -5px;
            }

            &[name='back-side-left-leg-bottom']:after {
                background-position: -389px -5px;
            }

            &[name='back-side-right-leg-top']:after {
                background-position: -437px -5px;
            }

            &[name='back-side-right-leg-center']:after {
                background-position: -485px -5px;
            }

            &[name='back-side-right-leg-bottom']:after {
                background-position: -533px -5px;
            }

            &[name='back-side-left-pocket']:after {
                background-position: -581px -5px;
            }

            &[name='back-side-right-pocket']:after {
                background-position: -629px -5px;
            }

            &[name='front-side-left-leg']:after {
                background-position: -197px -5px;
            }

            &[name='front-side-right-leg']:after {
                background-position: -53px -5px;
            }

            &[name='back-side-left-leg']:after {
                background-position: -341px -5px;
            }

            &[name='back-side-right-leg']:after {
                background-position: -485px -5px;
            }
        }

        // &.active small {
        //     &[name='front-side-right-leg-top']:after {
        //         background-position: -5px -59px;
        //     }
        //     &[name='front-side-right-leg-center']:after {
        //         background-position: -53px -59px;
        //     }
        //     &[name='front-side-right-leg-bottom']:after {
        //         background-position: -101px -59px;
        //     }
        //     &[name='front-side-left-leg-top']:after {
        //         background-position: -149px -59px;
        //     }
        //     &[name='front-side-left-leg-center']:after {
        //         background-position: -197px -59px;
        //     }
        //     &[name='front-side-left-leg-bottom']:after {
        //         background-position: -245px -59px;
        //     }
        //     &[name='back-side-left-leg-top']:after {
        //         background-position: -293px -59px;
        //     }
        //     &[name='back-side-left-leg-center']:after {
        //         background-position: -341px -59px;
        //     }
        //     &[name='back-side-left-leg-bottom']:after {
        //         background-position: -389px -59px;
        //     }
        //     &[name='back-side-right-leg-top']:after {
        //         background-position: -437px -59px;
        //     }
        //     &[name='back-side-right-leg-center']:after {
        //         background-position: -485px -59px;
        //     }
        //     &[name='back-side-right-leg-bottom']:after {
        //         background-position: -533px -59px;
        //     }
        //     &[name='back-side-left-pocket']:after {
        //         background-position: -581px -59px;
        //     }
        //     &[name='back-side-right-pocket']:after {
        //         background-position: -629px -59px;
        //     }
        // }
    }

    &[type='shorts'] .editor-surfaces-pieces a {
        small {
            &::after {
                background-image: url(@/assets/images/designer/designer-pieces-shorts.png);
                background-size: 672px 108px;
            }

            &[name='front-side-right-leg-bottom']:after {
                background-position: -5px -5px;
            }

            &[name='front-side-right-leg']:after {
                background-position: -5px -5px;
            }

            &[name='front-side-left-leg-bottom']:after {
                background-position: -53px -5px;
            }

            &[name='front-side-left-leg']:after {
                background-position: -53px -5px;
            }

            &[name='back-side-left-pocket']:after {
                background-position: -101px -5px;
            }

            &[name='back-side-right-pocket']:after {
                background-position: -149px -5px;
            }

            &[name='front-side-right-leg-pocket']:after {
                background-position: -197px -5px;
            }

            &[name='front-side-left-leg-pocket']:after {
                background-position: -245px -5px;
            }

            &[name='back-side-left-leg-bottom']:after {
                background-position: -293px -5px;
            }

            &[name='back-side-right-leg-bottom']:after {
                background-position: -341px -5px;
            }

            &[name='back-side-left-leg']:after {
                background-position: -293px -5px;
            }

            &[name='back-side-right-leg']:after {
                background-position: -341px -5px;
            }
        }

        // &.active small {
        //     &[name='front-side-right-leg-bottom']:after {
        //         background-position: -5px -59px;
        //     }
        //     &[name='front-side-left-leg-bottom']:after {
        //         background-position: -53px -59px;
        //     }
        //     &[name='back-side-left-leg-pocket']:after {
        //         background-position: -101px -59px;
        //     }
        //     &[name='back-side-right-leg-pocket']:after {
        //         background-position: -149px -59px;
        //     }
        //     &[name='front-side-right-leg-pocket']:after {
        //         background-position: -197px -59px;
        //     }
        //     &[name='front-side-left-leg-pocket']:after {
        //         background-position: -245px -59px;
        //     }
        //     &[name='back-side-left-leg-bottom']:after {
        //         background-position: -293px -59px;
        //     }
        //     &[name='back-side-right-leg-bottom']:after {
        //         background-position: -341px -59px;
        //     }
        // }
    }
}
</style>
